<template>
  <div class="bg">
    <div class="top_nav">
      <!-- <img @click="returnTap"
        class="return_icon"
        src="../../../static/images/me/more.jpg"
        alt=""
      /> -->
        <van-icon
        name="arrow-left"
        size="20"
        class="return_icon"
        color="#fff"
        @click="returnTap"
      />
      <span>个人资料</span>
      <span class="btn"> 编辑</span>
    </div>
    <div v-for="(item, index) in list" :key="index">
      <div
        class="list"
        :class="{ marg_bo_20: index == 2, height100: item.id == 0 }"
        @click="btnEvent(item.id)"
      >
        <span>{{ item.title }}</span>
        <input type="text" placeholder="请输入地址" v-if="item.id==6 && item.text == ''">
        <span v-if="item.id != 3 && item.id != 0">{{ item.text }}</span>
        <img
          v-if="item.id == 0"
          class="headimg"
          src="../../../static/images/me/headimg.png"
        />
        <img
          v-if="item.id == 3"
          class="icon_code"
          src="../../../static/images/me/code.png"
          alt=""
        />
        <img
          src="../../../static/images/me/more.jpg"
          class="more_icon"
          alt=""
          v-if="item.showMore"
        />
      </div>
      <div class=""></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        { id: 0, title: "头像", text: "", showMore: false },
        { id: 1, title: "名字", text: "小李", showMore: false },
        { id: 2, title: "系统号", text: "123456", showMore: false },
        { id: 3, title: "我的二维码", text: "", showMore: true },
        { id: 4, title: "性别", text: "", showMore: true },
        { id: 5, title: "出生年月", text: "2020年8月20日", showMore: true },
        { id: 6, title: "地址", text: "", showMore: false },
        { id: 7, title: "个性签名", text: "", showMore: false },
      ],
    };
  },
  methods: {
        returnTap(){
          this.$router.go(-1)
      },
    btnEvent(id) {
      switch (id) {
        case 0:
          this.$router.push({
            path: "/personalheadimg",
          });
          break;
        case 1:
          console.log(id);

          break;
        case 2:
          console.log(id);
          break;
        case 3:
          this.$router.push({
              path:"/showcode"
          })
          break;
        case 4:
          console.log(id);
          break;
        default:
          console.log("哈哈哈哈");
      }
    },
  },
};
</script>
<style scoped>
.bg {
  background: #eeeeee;
  width: 100vw;
  height: 100vh;
}
.top_nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: 0 25px;
  background: #4AC7D7;
  color: #ffffff;
}
.return_icon {
  width: 20px;
  height: 20px;
  /* transform: rotate(180deg); */
}
.btn {
  /* color: #06c25f; */
}
.list {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: 0 60px 0 10px;

  background: #ffffff;
  border-bottom: 1px solid #eeeeee;
}
.more_icon {
  position: absolute;
  right: 20px;
  top: 15px;
  width: 20px;
  height: 20px;
}
.marg_bo_20 {
  margin-bottom: 20px;
}
.icon_code {
  width: 20px;
  height: 20px;
}
.height100 {
  height: 100px;
}
.headimg {
  height: 60px;
  width: 60px;
}
input{
    border: none;
    outline: none;
}
</style>